<template>
  <!-- 添加或修改角色配置对话框 -->
  <el-dialog :title="title" :visible.sync="open" width="550px">
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-row>
        <el-col :span="24">
          <el-form-item label="预约时间" prop="makeTime">
            <el-date-picker
              v-model="form.makeTime"
              type="datetime"
              placeholder="选择日期时间">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitFormFn">确 定</el-button>
      <el-button @click="cancelFn">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import { apiRequestFlowto } from "../../../../api/pmp/api.recruit";

  export default {
    name: 'circulationDetail', // 预约
    props: {
      id: {
        type: Number,
        default: 0
      }
    },
    data () {
      return {
        // 表单
        form: {
          makeTime: undefined
        },
        // 弹出层标题
        title: "预约",
        // 是否显示弹出层
        open: false,
        // 表单校验
        rules: {
          makeTime: [
            { required: true, message: "预约时间不能为空", trigger: "blur" }
          ]
        }
      };
    },
    methods: {
      // 取消按钮
      cancelFn() {
        this.open = false;
      },
      /** 提交按钮 */
      submitFormFn: function() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            apiRequestFlowto({...this.form, flowId:this.id, flowStatic:4}).then(response => {
              console.log("流转成功",{...this.form, flowId:this.id, flowStatic:4});

              this.$store.dispatch('clearFlowId');
              this.$parent.getListFn();
              this.open = false;
              this.$message({
                type: 'success',
                message: '操作成功!'
              });
            });
          }
        });
      },
      // 打开页面
      openDetail(){
        this.open = true;
        this.form.makeTime = undefined;
      }
    }
  };
</script>
